<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>宾馆管理系统</title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			function add(){
				let fang = $("#fang").val();
				let ren = $("#ren").val();
				let phone = $("#phone").val();
				let bei = $("#bei").val();
				let count = $("tbody>tr").length + 1;
				let rowItem = `<tr>
				   <td>${count}</td>
				   <td>${fang}</td>
				   <td>${ren}</td>
				   <td>${[phone]}</td>
				   <td>${bei}</td>
				   <td><button type="button" onclick="del(this)">删除</button></td>
			   </tr>`
			   $("tbody").append(rowItem);
			}
			function del(btn){
				$(btn).parent().parent().remove();
			}
		</script>
	</head>
	<body>
	   <form>
	   	  房号<input type="text" id="fang">
	   	  入住人<input type="text" id="ren">
	   	  联系电话<input type="text" id="phone">
	   	  备注<input type="text" id="bei">
		  <button type="button" onclick="add()">添加</button>
	   </form>
	   <table border="1px">
		   <thead>
			   <th>序号</th>
			   <th>房号</th>
			   <th>入住人姓名</th>
			   <th>联系电话</th>
			   <th>备注</th>
			   <th>编辑</th>
		   </thead>
		   <tbody>
			  
		   </tbody>
	   </table>
	</body>
</html>